<template>
  <div class="allCustomer">
    <div class="page-tab">
      <el-tabs v-model="activeIndex" @tab-click="handleSelectMenu">
        <el-tab-pane label="全部客户" name="1"></el-tab-pane>
        <el-tab-pane label="待分配客户" name="2"></el-tab-pane>
        <el-tab-pane label="跟进中客户" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <SearchCriteria ref="child" @sendMessage="getMessage"></SearchCriteria>
    <div class="main">
      <div class="top">
        <div>
          <el-checkbox v-model="checkedAll" @change="allDataChecked">全选</el-checkbox>
          <el-button @click="importVisible = true" type="info" v-if="(activeIndex == 1)">
            <svg-icon iconClass="uploadd" class="daoru"></svg-icon>
            批量导入
          </el-button>
          <el-button @click="openAssignment" :disabled="isAssignDisable" v-if="activeIndex != 3" key="fenpei">批量分配</el-button>
          <el-button :disabled="isRecoveryDisable" @click="openRecycling" v-if="activeIndex != 2" key="huishou">回收</el-button>
        </div>
        <el-button type="primary" @click="dialogCreatedVisible = true" v-if="(activeIndex == 1)">
          <svg-icon iconClass="addw"></svg-icon>
          新建客户
        </el-button>
      </div>
      <el-table :data="tableData" style="width: 100%" height="415" @selection-change="handleSelectionChange" v-loading="loadingrefresh" ref="mainTable">
        <el-table-column type="selection" width="45" align="center" fixed>
        </el-table-column>
        <el-table-column type="index" label="序号" width="50" fixed align="center"></el-table-column>
        <el-table-column prop="sid" label="客户号" align="center" :min-width="200" fixed="left"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center" :min-width="100" fixed>
          <template slot-scope="scope">
            {{ scope.row.name || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="customerWay" label="获客来源" align="center" :min-width="200" fixed="left">
          <template slot-scope="scope">
            {{ scope.row.customerWay || '-' }}
          </template>
        </el-table-column>
        <div v-for="(item, i) in tableList" :key="i">
          <el-table-column width="80" :prop="item.prop" :label="item.label" align="center" v-if="item.label == '分配状态'">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.distributionState === '已分配'">已分配</el-tag>
              <el-tag type="warning" v-if="scope.row.distributionState === '待分配'">待分配</el-tag>
              <el-tag type="info" v-if="scope.row.distributionState === '已回收'">已回收</el-tag>
            </template>
          </el-table-column>
          <el-table-column :width="200" :prop="item.prop" :label="item.label" align="center"
            v-else-if="item.label == '获客来源'">
          </el-table-column>
          <el-table-column width="120" :prop="item.prop" :label="item.label" align="center"
            v-else-if="item.label == '企微添加状态'">
            <template slot-scope="scope">
              <span class="wecomAdd1" v-if="scope.row.wecomAddState === '已添加'">已添加</span>
              <span class="wecomAdd2" v-if="scope.row.wecomAddState === '待添加'">待添加</span>
              <span class="wecomAdd3" v-if="scope.row.wecomAddState === '已删除'">已删除</span>
            </template>
          </el-table-column>
          <el-table-column :prop="item.prop" show-overflow-tooltip :label="item.label" align="center" v-else :width="160"></el-table-column>
        </div>
        <el-table-column prop="createTime" label="操作" :width="120" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
            <el-button @click="handClickUnbind(scope.row)" type="text" size="small"
              v-if="+scope.row.isAutoMerge === 1">解绑</el-button>
          </template>
        </el-table-column>
        <el-table-column width="35" fixed="right">
          <template slot="header">
            <i class="el-icon-setting" @click="openShowList"></i>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="message.pageNum" :pageSize="message.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
    </div>
    <el-dialog title="选择需要展示的数据项" :visible.sync="dialogFormVisible">
      <showData @sendDataList="getDataList" ref="showDataList"></showData>
    </el-dialog>
    <el-dialog title="添加客户" :visible.sync="dialogCreatedVisible" width="520px" :show-close="false" :close-on-click-modal="false">
      <createdCustomer @closeCreatedDialog="closeCreatedDialog" @sendCreateMessage="getCreateMessage" ref="createdCustomer"></createdCustomer>
    </el-dialog>
    <!-- 导入客户 -->
    <ImportCustomer :visible.sync="importVisible" :isMyCustomer="0" />
    <!-- 筛选侧边栏 -->
    <el-drawer title="筛选数据项" :visible.sync="dialogLeft" direction="ltr" custom-class="demo-drawer" size="320px">
      <screenList ref="screenList" @sendScreenMessage="getScreenList" @sendKeepList="getKeepList"></screenList>
    </el-drawer>
    <!-- 分配 -->
    <Assignment ref="assignment" :assignTotal="assignTotal" @sendAssignInfo="getAssignInfo" @sendResult="getResult">
    </Assignment>
    <!-- 回收 -->
    <Recycling ref="recycling" :recyclingList="recyclingList"></Recycling>
    <!--    回退确认框-->
    <!-- 解绑确认弹窗-->
    <el-dialog title="解绑确认" :visible.sync="unbindVisible" class="deleteDialog" width="436px">
      <span class="deleteInfo">确认解绑此条客户信息？</span>
      <div slot="footer">
        <el-button @click="unbindVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClickFallback">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SearchCriteria from '../components/searchCriteria.vue'
import showData from '../components/showData.vue'
import createdCustomer from '../components/createdCustomer.vue'
import screenList from '../components/screenList.vue'
import ImportCustomer from '../myCustomer/components/ImportCustomer'
import Assignment from '../components/Assignment'
import Recycling from './components/Recycling'
import { allCustomerAdd, distributeCus, getAllCustomerInfo } from '@/api/customer/customerManage'
import { unbinding } from "@/api/customer/customerManage";

export default {
  name: 'allCustomer',
  components: {
    SearchCriteria,
    showData,
    createdCustomer,
    screenList,
    ImportCustomer,
    Assignment,
    Recycling
  },
  data() {
    return {
      activeIndex: '1',
      message: {
        pageNum: 1,
        pageSize: 20
      },
      // 性别
      genderOptions: [],
      tableData: [],
      tableList: [],
      total: 0,
      dialogFormVisible: false,
      dialogCreatedVisible: false,
      dialogLeft: false,
      tableSelectList: [],
      // 分配客户
      loadingrefresh: false,
      checkedAll: false,//全选
      // 回收
      isRecoveryDisable: true,
      recyclingList: [],
      // 导入客户
      importVisible: false,
      // 分配
      assignTotal: null,
      isAssignDisable: true,
      dictOptions: [
        { dict: 'follow_states', list: [], label: 'followStage' },
        { dict: 'marital', list: [], label: 'marital' },
        { dict: 'education', list: [], label: 'education' },
        { dict: 'job_type', list: [], label: 'job' },
        { dict: 'nationality', list: [], label: 'nationality' },
        { dict: 'friend_status', list: [], label: 'friendStatus' },
        { dict: 'customer_grade', list: [], label: 'customerGrade' },
        { dict: 'is_bind_wechat', list: [], label: 'isBindWechat' },
        { dict: 'distribution_state', list: [], label: 'distributionState' },
        { dict: 'wecom_add_state', list: [], label: 'wecomAddState' },
        { dict: 'customer_state', list: [], label: 'customerState' }
      ],
      unbindVisible: false,
      unbindRow: {},
    }
  },
  created() {
    this.getDicts('gender').then((res) => {
      if (res.code === 200) {
        this.genderOptions = res.data
      }
    })
    this.getDictOptions()
  },
  mounted() {
    this.getDataList()
    this.$refs.child.search()
  },
  methods: {
    handleSizeChange(val) {
      this.message.pageNum = 1;
      this.message.pageSize = val;
      this.getList()
    },
    handleCurrentChange(val) {
      this.message.pageNum = val;
      this.getList()
    },
    getInfo(params) {
      this.loadingrefresh = true
      getAllCustomerInfo(params).then((res) => {
        if (res.code === 200) {
          res.rows.forEach(element => {
            element.gender = this.selectDictLabel(this.genderOptions, element.gender)
            this.dictOptions.forEach((item) => {
              element[item.label] = this.selectDictLabel(item.list, element[item.label])
            })
          })
          this.tableData = res.rows
          this.total = res.total
          this.loadingrefresh = false
        }
      }).catch(() => {
        this.loadingrefresh = false
      })
    },
    getDictOptions() {
      this.dictOptions.forEach((item) => {
        this.getDicts(item.dict).then((res) => {
          if (res.code === 200) {
            item.list = res.data
          }
        })
      })
    },
    // 接收侧边筛选
    getScreenList(value) {
      const params = {
        ...this.message,
        pageType: this.activeIndex,
        ...value
      }
      this.getInfo(params)
    },
    getList() {
      this.$refs.child.search()
    },
    getMessage(value) {
      const params = {
        ...this.message,
        pageType: this.activeIndex,
        ...value
      }
      this.getInfo(params)
    },
    handleSelectionChange(value) {
      this.tableSelectList = value
      this.assignTotal = value.length
      // 回收、分配按钮置灰
      if (value.length > 0) {
        this.isAssignDisable = false
        this.isRecoveryDisable = false
      } else {
        this.isAssignDisable = true
        this.isRecoveryDisable = true
      }
    },
    // 展示数据项
    openShowList() {
      this.dialogFormVisible = true
      setTimeout(() => {
        this.$refs.showDataList.getLabelList()
      }, 100)
    },
    getDataList() {
      this.dialogFormVisible = false
      const siftList = JSON.parse(sessionStorage.getItem('siftList'))
      if (siftList) {
        this.tableList = siftList
        // 在数据更新后执行
        this.$nextTick(() => {
          if (this.$refs.mainTable && this.$refs.mainTable.doLayout) {
            this.$refs.mainTable.doLayout()
          }
        })
      }

    },
    getCreatedList(value) {
      this.dialogCreatedVisible = false
      console.log(222, value)
    },
    // 分配
    openAssignment() {
      this.$refs.assignment.openDialog()
    },
    getAssignInfo(value) {
      let sidList = []
      this.tableSelectList.forEach(item => {
        sidList.push({ sid: item.sid })
      })
      const params = {
        sidList,
        ...value
      }
      // 分配接口请求
      distributeCus(params).then(res => {
        if (res.code === 200) {
          this.$refs.assignment.openResultDialog()
        }
      }).catch(() => {
        console.log('error submit!!')
      })
    },
    getResult() {
      this.$refs.child.search()
    },
    // 菜单选择
    handleSelectMenu() {
      this.$refs.child.search()
    },
    // 详情
    handleClick(rows) {
      this.$router.push({
        path: 'customerDetails',
        query: {
          sid: rows.sid
        }
      })
    },
    allDataChecked(e) {
      // 操作全选按钮
      if (e === true) {
        this.$refs.mainTable.toggleAllSelection()
      } else {
        this.$refs.mainTable.clearSelection()
      }

    },
    // 侧边栏筛选
    openDialogLeft() {
      this.dialogLeft = true
      setTimeout(() => {
        this.$refs.screenList.getSelectList()
      }, 100)
    },
    closeDialogLeft() {
      this.dialogLeft = false
    },
    getKeepList() {
      // 接收侧边栏保存
      this.closeDialogLeft()
      this.$refs.child.getLabelList()
    },
    closeCreatedDialog() {
      this.dialogCreatedVisible = false;
    },
    // 新建客户
    getCreateMessage(value) {
      this.dialogCreatedVisible = false
      if (value) {
        // 新建接口请求
        allCustomerAdd(value).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.$refs.child.search()
          }
        }).catch(() => {
          console.log('error submit!!')
        })
      }
      this.$refs.createdCustomer.resetForm()
    },
    // 回收
    openRecycling() {
      this.recyclingList = []
      this.tableSelectList.forEach(element => {
        this.recyclingList.push({ 'sid': element.sid })
      })
      this.$refs.recycling.openDialog()
    },
    handClickUnbind(row) {
      this.unbindRow = row;
      this.unbindVisible = true;
    },
    handleClickFallback() {
      // 回退
      let params = {
        sid: this.unbindRow.sid
      }
      unbinding(params)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success('回退成功');
            this.$refs.child.search()
            this.unbindVisible = false;
          } else {
            this.unbindVisible = false;
          }
        })
        .catch(() => {
          this.unbindVisible = false;
          console.log('error submit!!')
        })
    },
  }
}
</script>


<style lang="scss" scoped>
@import "../../../styles/element-ui.scss";
@import "@/styles/base.scss";

.allCustomer {
  .g-pad20 {
    display: flex;
    justify-content: space-between;
  }

  .search {
    display: flex;
    padding: 10px 20px 10px;
    flex-wrap: wrap;
    justify-content: space-between;

    .demo-input {
      width: 22%;
      display: flex;
      align-items: center;
      margin: 5px 30px 10px 0;

      .el-input {
        margin-left: 20px;
        flex: 1;
      }

      span {
        margin-left: 20px;
      }

      .el-select {
        width: 100%;
        flex: 1;
        margin-left: 20px;
      }

    }

  }

  .header-search-select {
    width: 152px;
  }

  .main {
    background: #fff;
    padding: 0 20px 20px 20px;
    margin-top: 10px;

    .top {
      padding: 20px 0;
      display: flex;
      justify-content: space-between;

      .daoru {
        margin: 0 3px;
      }

      .el-checkbox {
        margin: 0 10px;
      }

      .svg-icon {
        margin-right: 5px;
      }
    }
  }

  .shuai {
    font-size: 15px;
  }

  .import-template {
    color: rgba(15, 64, 245, 1);
    text-decoration: underline;
    cursor: pointer;
    margin-bottom: 30px;
    display: inline-block;
  }

  .tag_content {
    margin-top: 20px;
    margin-left: 20px;

    .input {
      display: flex;
      margin-right: 100px;
      align-items: center;

      .el-input {
        flex: 1;
        margin-left: 10px;
      }
    }

    .text {
      margin-right: 100px;
      margin-top: 10px;
      text-align: right;
      color: #082aff;
    }
  }

  .assign {
    padding: 0 10px;

    .inputRenNum {
      width: 40%;
      margin-right: 10px;
    }

    .el-input {
      margin-top: 5px;
      margin-bottom: 5px;
    }

    .nameSelect {
      width: 100%;
      display: flex;
      align-items: center;
    }

    .nameSelectActive {
      background: #FFEEEB;
    }

    .selectBox {
      width: 100%;
      height: 150px;
      overflow-y: scroll;
      margin-top: 10px;
    }

    .tagNames {
      // height: 50px;
      overflow-y: scroll;
    }
  }

  .el-tag.el-tag--success {
    background-color: #e6f9ef !important;
    border-color: #cdf3df !important;
    color: #06c160 !important;
  }

  .el-tag.el-tag--warning {
    background-color: #fdedee !important;
    border-color: #fadcde !important;
    color: #f46539 !important;
  }

  .el-tag.el-tag--info {
    background-color: #f4f4f5 !important;
    border-color: #e9e9eb !important;
    color: #909399 !important;
  }

  .wecomAdd1 {
    color: #666666;
  }

  .wecomAdd2 {
    color: #082aff;
  }

  .wecomAdd3 {
    color: #CCCCCC;
  }

  .nameNum {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-input {
      width: 130px;
    }
  }

  .page-tab {
    width: 100%;
    height: 40px;
    background: #fff;
  }

  .g-card {
    margin-top: 0;
  }

  .el-button--info:hover {
    border-color: #c5b5b5;
  }
}

::v-deep {
  .el-drawer__header {
    font-size: 16px;
    color: rgba(16, 16, 16, 1);
  }

  .demo-drawer {
    top: 60px;
  }

  .el-checkbox__label {
    width: 100%;
  }
}
</style>
